@charset "utf-8";

@import "./variable";

/* public */
.container {
  margin: 0 auto;
  width: 1200px;
}

.bg-white {
  background-color: #ffffff;
}

.bg-white2 {
  background-color: #f5f6fa;
}

.white,
.c-white {
  color: #ffffff;
}

.c-red {
  color: $red;
}

.c-blue {
  color: $blue;
}

.c222,
.c-gray2 {
  color: #222222;
}

.c666,
.c-gray6 {
  color: $gray6;
}

.c999,
.c-gray9 {
  color: $gray9;
}

.border {
  border: 1px solid #f5f5f5;
}

.border-bottom {
  border-bottom: 1px solid #f5f5f5;
}

.border-bottom-none {
  border-bottom: none !important;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.tac {
  text-align: center;
}

.tal {
  text-align: left;
}

.tar {
  text-align: right;
}

.oh {
  overflow: hidden;
}

.posr {
  position: relative;
}

.posa {
  position: absolute;
}

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.bold {
  font-weight: bold;
}

.dn {
  display: none;
}

.db {
  display: block;
}

.df {
  display: flex;
}

.commonPadding {
  padding: 0 15px;
}

.middleContainer {
  padding-top: 50px;
}

.middlePadding {
  padding-left: 15px;
  padding-right: 15px;
}

.insidePadding {
  padding-left: 15px;
  padding-right: 15px;
}

.clear {
  clear: both;
}

/* pubTitle */
.pub-title {
  font-size: 18px;
  color: #010101;
  border-bottom: 4px solid #e6e6e6;
  span {
    display: inline-block;
    line-height: 48px;
    border-bottom: 4px solid $blue;
    margin-bottom: -4px;
  }
  img {
    vertical-align: middle;
    margin-right: 8px;
  }
  a {
    float: right;
    font-size: 14px;
    color: #333333;
    line-height: 48px;
    &:hover {
      color: $blue;
    }
  }
}

/* img */
.img-box {
  overflow: hidden;
  position: relative;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &:hover img {
    transform: scale(1.1);
    transition: all 0.2s linear;
  }
}

.blue {
  color: $blue;
}
